<template>
  <el-date-picker
    :type="type"
    v-model="Val"
    v-bind="$attrs"
    :disabled="disabled"
    :clearable="clearable"
    :start-placeholder="startPlaceholder"
    :end-placeholder="endPlaceholder"
    value-format="YYYY-MM-DD"
    style="width: 100%"
  />
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  type: {
    type: String,
    default: () => 'daterange'
  },
  disabled: {
    type: Boolean,
    default: () => false
  },
  clearable: {
    type: Boolean,
    default: () => true
  },
  startPlaceholder: {
    type: String,
    default: () => '开始日期'
  },
  endPlaceholder: {
    type: String,
    default: () => '结束日期'
  }
})

const Val = ref(props.modelValue)
//监听父组件的值
watch(
  () => props.modelValue,
  () => {
    Val.value = props.modelValue
  }
)

// 通过emit将值传递给父组件
emit('update:modelValue', Val)
</script>
